<template>
    <div class="side" v-loading="isLoading">
        <div class="header">
            <span class="title">猜您喜欢</span>
            <el-button type="text" size="small" @click="getbook">换一换</el-button>
        </div>
        <div class="box hvr-grow" v-for="item in list" @click="godetail(item.bookID)">
            <img :src="item.coverImg" />
            <div class="name">{{ item.title }}</div>
        </div>
    </div>
</template>

<script>
import service from "@/utils/request";
import store from "@/store";

export default {
    data() {
        return {
            book: [],
            list: [],
            isLoading: true,
        };
    },
    //获取数据
    async beforeMount() {
        this.isLoading = true;
        await service({
            url: `/book/list/1/100`,
            method: "get",
        }).then((res) => {
            // console.log("respon", res.data);
            this.book = res.data.records;
            this.getbook();
        });
        this.isLoading = false;
    },
    methods: {
        //随机取三个图书数据
        getbook() {
            let i = Math.round(Math.random() * (this.book.length - 3));
            this.list = this.book.slice(i - 1, i + 2);
            // console.log("bb", this.list);
        },
        //异步跳转
        async godetail(event) {
            // console.log('cc',event)
            store.commit("setActiveIndex", `detail/` + event);
            store.commit("getActiveIndex");
            console.log(store.state.activeIndex);
            await this.$router.replace("/detail/" + event);
            await window.location.reload();
        },
    },
};
</script>

<style lang="scss" scoped>
@import url("hover.css/css/hover.css");

.side {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .header {
        display: flex;
        justify-content: space-between;
        padding: 1.2rem;

        .title {
            font-weight: bold;
            font-size: 1.2rem;
        }
    }

    .box {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        overflow: hidden;
        padding: 1rem 1.2rem;

        img {
            height: 8rem;
            padding: 0.5rem;
        }

        .name {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            width: 100%;
            text-align: center;
            margin-top: 0.5rem;
            font-size: 0.8rem;
        }
    }
}
</style>
